<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
        通用字体族
在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。
所有不同的字体名称都属于这五个通用字体系列之一。

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
        */
        .box1 {
            /* 字体族可以写多个，先生效前面的，如果
                前面的字在电脑没有，再用后面的
            */
            /* font-family: "冬冬字体", Serif; */
            /* font-style: italic; */
            /* font-weight 属性指定字体的粗细：100-900之间的值
                用的是我电脑上的字体，首先这个字体要存在在电脑上
                一般我们字体只会准备一两份不同粗细的字。
                bold：会自动寻找粗体
            */
            /* font-weight: bold; */

            /* 如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px */
            /* font-size: 16px; */


            /* font 属性是以下属性的简写属性：
            font-style
            font-variant
            font-weight
            font-size/line-height
            font-family */
            width: 300px;
            height: 100px;
            background-color: red;
            /* 行间距 */
            /* line-height: 100px; */

            /* 文字的对齐方式
            text-align： 属性用于设置文本的水平对齐方式。
            vertical-align 属性设置元素的垂直对齐方式。
            */
            /* text-align: center; */

        }

        span {
            font-size: 12px;
            vertical-align: middle;
        }

        a img {
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box1">
        ABCDEFIHabcdefg中华人民共和国X<span>o</span>
    </div>
    <a href="#"><img src="./yz.png" alt=""></a>
</body>

</html>